<template>
  <div class="main-container_login">
    <div class="header">
      <div class="logo"><el-image :src="logo"></el-image></div>
      <div class="back">
<!--        <router-link :to="{path: '/', query: {}}">
          <span><i class="el-icon-arrow-left"></i></span>&nbsp;<span>返回首页</span>
        </router-link>-->
      </div>
    </div>
    <div class="box">
      <div class="login-image">
        <el-image :src="logo_image"></el-image>
      </div>
      <div class="login-content">

        <div class="name">
          <div class="title">巴士预约平台<!--<img src="@/assets/images/blank.png" class="blank-dot" />--></div>
          <div class="desc"></div>
        </div>
        <div class="action_type">
<!--          <div class="login">登 录</div> <div class="reg">注 册</div>-->
          <el-radio-group v-model="action_type" size="medium">
            <el-radio-button label="login">登 录</el-radio-button>
            <el-radio-button label="reg" >注 册</el-radio-button>\
          </el-radio-group>
        </div>
        <div class="login-form">
          <el-form :model="form" :rules="formRules" ref="form" label-width="0px" class="demo-ruleForm">
            <el-form-item label=""  prop="mobile" required>
              <el-input placeholder="请输入手机号" v-model="form.mobile" class="input-with">
                <el-select v-model="form.prefix" slot="prepend" placeholder="请选择" style="width:100px;">
                  <el-option label="中国+86" value="1"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
            <el-form-item label=""  prop="sms_code" required>
              <el-input placeholder="请输入短信验证码" v-model="form.sms_code" class="input-with">
                <template slot="append">
                  <el-button slot="append" class="sendSms" @click="sendSms" v-if="curCount == 0">{{ mobile_code_text }}</el-button>
                  <el-button slot="append" class="sendSms" v-else>{{ mobile_code_text }}</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label=""  prop="name" required v-if="action_type=='reg'">
              <el-input placeholder="请输入商户名称" v-model="form.name" class="input-with">
              </el-input>
            </el-form-item>
            <el-form-item label="">
              <div class="submit-btn" @click="handleLogin" v-if="action_type=='login'">{{login_text}}</div>
              <div class="submit-btn" @click="handleReg" v-if="action_type=='reg'">注 册</div>
            </el-form-item>
          </el-form>
        </div>
        <div class="contact-info">
          <div class="left">
            <div class="first">客服微信</div>
            <div class="sec">xwb438420161</div>
            <div class="three">请扫码二维码添加客服微信咨询</div>
          </div>
          <div class="right">
            <el-image :src="kefu_qrcode"></el-image>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import { setMobileCode } from '@/api/user/base'
import Footer from "@/layout/user/default/Footer.vue"
export default {
  name: 'loginFnbox',
  components: {
    Footer
  },
  data () {
    return {
      logo: require('../../assets/images/logo.png'),
      logo_image: require('../../assets/images/login.png'),
      kefu_qrcode: require('../../assets/images/kefu-qrcode.png'),
      action_type: 'login',
      form: {
        prefix: '1',
        mobile: '13588209351',
        name: '',
        sms_code: '',
        type: 1,
      },
      formRules: {
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        sms_code: [{ required: true, message: '请输入手机验证码', trigger: 'blur' }],
        name: [{ required: true, message: '请输入商户名称', trigger: 'blur' }],
      },
      login_text: '登 录',
      width: '500px',
      showStatus: true,
      step: 1,
      user_info: {},
      success_url: '/user/dashboard',
      success_url2: '/user/info',

      curCount: 0,
      count: 30,
      mobile_code_text: '发送验证码',
      InterValObj: 0,
    }
  },
  created() {
    this.checkLogin()
  },
  methods: {
    checkLogin() {
      if (this.$store.getters.loginStatus == 1) {
        this.$router.push({path:this.success_url, query:{}})
      }
    },
    callFn(data) {
      this.$store.commit('setLoginStatus', 1)
      this.$router.push({path:data.path, query:{}})
    },
    handleReg() {
      this.loading = true
      this.$refs['form'].validate(valid => {
        this.loading = false
        if (valid) {
          this.login_text = '注册中..'
          this.$store.dispatch('frontReg',this.form).then( res =>{
            this.login_text = '注 册'
            if (res.code == 200) {
              this.callFn({path: this.success_url})
            }
          }).catch(() => {
          })

        }
      })
    },
    handleLogin() {
      this.loading = true
      this.$refs['form'].validate(valid => {
        this.loading = false
        if (valid) {
          this.login_text = '登录中..'
          this.$store.dispatch('frontLogin',this.form).then( res =>{
            this.login_text = '登 录'
            if (res.code == 200) {
              this.callFn({path: this.success_url})
            }
          }).catch(() => {
          })
          setTimeout(function() {
            this.login_text = '登 录'
          }, 3000)
        }
      })
    },
    sendSms() {
      if (this.form.mobile === '') {
        this.$message({
          message: '请填写手机号',
          type: 'error'
        })
        return false
      }
      setMobileCode(this.form).then(res => {
        this.loading = false
        if(res.code == 200){
          this.sendMessageTime()
        } else {
          //this.$message({message: res.msg, type: 'success'})
        }
      }).catch(()=>{
        this.loading = false
      })
    },
    sendMessageTime() {
      if (this.curCount !== 0) {
        return false
      }
      this.curCount = this.count
      this.mobile_code_text = this.curCount + '秒后可重发'
      this.InterValObj = window.setInterval(this.SetRemainTime, 1000)
    },
    SetRemainTime() {
      if (this.curCount === 0) {
        window.clearInterval(this.InterValObj) // 停止计时器
        this.mobile_code_text = '重发验证码'
        this.login_text = '登录/注册'
      } else {
        this.curCount--
        this.mobile_code_text = this.curCount + '秒后可重发'
      }
    },
    open() {

    },
    closeForm() {
      this.$router.push({path:'/user/info', query:{}})
      this.showStatus = false
    },
  },
  mounted () {

  },
};
</script>
<style scoped lang="scss">
/deep/.el-icon-arrow-left {
  font-weight: bold;
}
/deep/.input-with {
  width: 340px;
}
.main-container_login {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  text-align:center;
  background-image: url('../../assets/images/login-backgroud.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed !important;
  font-size: 14px;
  .header {
    width: 80%;
    height: 70px;
    border: 0px solid #ccc;
    margin: 60px auto 0;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #000000;
    .logo {
      width: 50px;
      height: 50px;
    }
  }
  .box {
    width: 80%;
    height: 550px;
    border: 0px solid #ccc;
    border-radius: 5px;
    position: relative;
    margin: 0px auto;
    background:#fff;
    display: flex;
    .login-image {
      width: 62%;
      height: 100%;
      margin:0;
      .el-image {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }
    }
    .login-content {
      width: 38%;
      height: 100%;
      .action_type {
        line-height: 60px;
        display: flex;
        border: 0px solid #ccc;
        text-align: center;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
      }
      .name {
        width: 340px;
        border: 0px solid #ccc;
        margin: 0 auto;
        .title {
          margin: 40px 0 0 0px;
          font-size: 22px;
          color:#000000;
          font-weight: bold;
          text-align: center;
          .blank-dot {
            width: 6px;
            height: 6px;
            margin: 0 6px 0 6px;
          }
        }
        .desc {
          text-align: left;
          margin: 10px 0 0 0px;
          font-size: 14px;
          color: #999999;
        }
      }
      .login-form {
        width: 340px;
        //height: 200px;
        border: 0px solid #ccc;
        margin: 20px auto 0;
        .submit-btn {
          width: 340px;
          height: 40px;
          border: 0px solid #ccc;
          background: #00907F;
          border-radius: 5px;
          color:#fff;
          cursor: pointer;
        }
        .sendSms {
          cursor: pointer;
        }
      }
      .contact-info {
        width: 340px;
        //height: 180px;
        border: 0px solid #ccc;
        margin: 0 auto;
        display: flex;
        .left {
          width: 60%;
          margin-top: 10px;
          div {
            line-height: 30px;
            text-align: left;
          }
          .first {
            font-size: 16px;
          }
          .sec {
            font-size: 14px;
            color:#00907F;
          }
          .three {
            font-size: 14px;
            color:#999999;
          }
        }
        .right {
          width: 40%;
          .el-image {
            width: 100px;
            height: 100px;
          }
        }
      }
    }
  }
}
</style>